<template>
  <div class="container">
    <div class="row pt-5">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">疫苗接种者查询系统</h5>
            <div class="input-group mb-3">
              <span class="input-group-text">溯源查询</span>
              <input
                id="bytes32"
                type="text"
                class="form-control"
                placeholder="输入疫苗溯源哈希"
              />
            </div>
            <button id="_idToInfo" @click="_idToInfo" class="btn btn-primary" type="button">
              点击进行疫苗溯源查询
            </button>
            <div>
              <div class="input-group mb-3 pt-5">
                <span class="input-group-text">疫苗种类</span>
                <input id="name" type="text" readonly="readonly" class="form-control" />
              </div>
              <div class="input-group mb-3">
                <span class="input-group-text">疫苗类型(气态,液态,固态)</span>
                <input id="state" type="text" readonly="readonly" class="form-control" />
              </div>
              <div class="input-group mb-3">
                <span class="input-group-text">疫苗批号</span>
                <input id="batchId" type="text" readonly="readonly" class="form-control" />
              </div>
              <div class="input-group mb-3">
                <span class="input-group-text">疫苗详情介绍</span>
                <input id="intro" type="text" readonly="readonly" class="form-control" />
              </div>
              <div class="input-group mb-3">
                <span class="input-group-text">疫苗溯源信息</span>
                <input id="traceInfo" type="text" readonly="readonly" class="form-control" />
              </div>
              <div class="input-group mb-3">
                <span class="input-group-text">疫苗有效期(月)</span>
                <input id="periodOfValidity" type="text" readonly="readonly" class="form-control" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyChecking",
  methods: {
    _idToInfo() {
      var bytes32 = $("#bytes32").val();
      this.$Appjs.methods
        ._idToInfo(bytes32)
        .call()
        .then(function (result) {
          console.log("result =", result);
          document.getElementById("name").value = result.name
          if(result.state === '0'){
             document.getElementById("state").value = "固态"
          }else if(result.state === '1'){
            document.getElementById("state").value = "液态"
          }else if(result.state ==='2'){
            document.getElementById("state").value = "气态"
          }
          document.getElementById('batchId').value = result.batchId
          document.getElementById("intro").value = result.intro
          document.getElementById("traceInfo").value = result.traceInfo
          document.getElementById("periodOfValidity").value = result.periodOfValidity
          alert('查询成功')
      });
    },
  }
};
</script>

<style>
</style>